<?php
/**
 * @var $this Controller
 * @var $cs CClientScript
 */

$cs = Yii::app()->clientScript;
$cs->registerScriptFile('/js/underscore-min.js');
$cs->registerScriptFile('/js/jqueryui/jquery-ui-1.8.23.custom.min.js');
$cs->registerCssFile('/js/jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css');
$cs->registerScriptFile('/js/json2.js');
$cs->registerScriptFile('/js/todo.storage.js');
$cs->registerScriptFile('/js/todo.js');

$cs->registerScript('test', <<<EOF
if (isLocalStorageAvailable()) {
    var todo = new TodoItems();
} else {
    $('body').html('Ваш браузер не поддерживает LocalStorage.');
}
EOF
);

$this->pageTitle = Yii::app()->name;
?>

<div id="header">
    <div class="inpad">
        <span class="logo"></span>
		<span class="user">
			<?php
            $this->renderPartial('//partials/auth');
            ?>
		</span>
    </div>
</div>

<div id="page">
    <form id="newitem" method="get" action="http://www.google.com/search">
        <div class="input">
            <input id="mic" type="text" x-webkit-speech="x-webkit-speech" lang="ru"/>
            <textarea id="name" placeholder="Посадить дерево" autofocus="autofocus" rows="1" tabindex="1"></textarea>
            <a href="#" class="clear"></a>
        </div>

        <span id="clone"></span>
        <span id="return"></span>
    </form>

    <ul class="list default"></ul>
    <div class="buffer"></div>
</div>
<div id="footer">.</div>
<script type="text/javascript">
    <?php
    $storageKey = md5(Yii::app()->user->service . Yii::app()->user->id);
    ?>
    var storageKey = <?php echo json_encode($storageKey) ?>;

</script>
<script type="text/template" id="item-template">
    <% 

    var simpleItems = [];

    _.each(items, function(item, key) {
           
           if (!item.expired && !item.deadline) {
             
             simpleItems.push(item);
             //items.splice(key,1);
           }  
    });


   
     var dueItems =[];
    
    _.each(items, function(item, key) {
           
           if (item.expired) {
             
             dueItems.push(item);
             //items.splice(key,1);
           }  
    });
   
   var deadlineItems = [];
     _.each(items, function(item,key) {

           if (item.deadline && !item.expired) {
             deadlineItems.push(item);
            
             //items.splice(key,1);
            } 
    });

     items = simpleItems;
    
   %>
    <% //dump(dueItems); dump(deadlineItems);
    %>
    <li class="ui-drag-disabled"><span></span><ul class="items" id="dd0">
                <% if (dueItems.length) {%>
                    <li  class="date"><ul class="due">
                        <% _.each(dueItems, function(item, key) {%>
                            <% //alert(i.id + '-' + item.category_id)%>
                            

                                   <% if (item && !item . deleted && !item . completed) {%>
                                      
                                        <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="due">
                                            <label>
                                                <em></em>
                                            </label>
                                            <textarea><%= item . name %></textarea>
                                            <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
                                            <em><%= item . deadline ? item . deadline : '' %></em>
                                        </li>
                                        <% };   %>

                        <% }); %>
                    </ul></li>
                 <% }%>

                 <% if (deadlineItems.length) {%>
                   <li class="date"> <ul class="has-date">
                        <% _.each(deadlineItems, function(item, key) {%>
                            <% //alert(i.id + '-' + item.category_id)%>
                           

                                   <% if (item && !item . deleted && !item . completed ) {%>
                                      
                                        <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="has-deadline">
                                            <label>
                                                <em></em>
                                            </label>
                                            <textarea><%= item . name %></textarea>
                                            <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
                                            <em><%= item . deadline ? item . deadline : '' %></em>
                                        </li>
                                        <% };   %>

                        <% }); %>
                    </ul></li>
                 <% }%>   

    <% _ . each(items, function (item, key) { %>

    <% if (item && !item.deleted && !item.completed && item.category_id == 0) { %>
        <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="<%= (item.expired ? 'due' : (item.deadline ? 'has-deadline' : 'normal' ) ) %>">
            <label>
                <em></em>
            </label>
            <textarea><%= item . name %></textarea>
            <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
            <em><%= item . deadline ? item . deadline : '' %></em>
        </li>
        <% } %>
    <% }); %>
    </ul>
    </li>
    <% categoriesCount = 0 %>
    <% _.each(categories, function(i, k) {%>
        <% categoriesCount++; %>
        <li class="title" data-item-id="<%=i.id%>" data-iternal-id="<%=k%>">

            <textarea><%= i.name %></textarea><span><%=i.name.replace(/@.+/, '')%></span>
            <ul class="items" id="dd<%=k+1%>">
                <% item_count=0%>
                 <% if (dueItems.length) {%>
                    <li  class="date"><ul class="due">
                        <% _.each(dueItems, function(item, key) {%>
                            <% //alert(i.id + '-' + item.category_id)%>
                            <% if (i.id == item.category_id) {%>

                                   <% if (item && !item . deleted && !item . completed && i.id == item.category_id) {%>
                                       <%item_count++;%>
                                        <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="due">
                                            <label>
                                                <em></em>
                                            </label>
                                            <textarea><%= item . name %></textarea>
                                            <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
                                            <em><%= item . deadline ? item . deadline : '' %></em>
                                        </li>
                                        <% }; };  %>

                        <% }); %>
                    </ul></li>
                 <% }%>

                 <% if (deadlineItems.length) {%>
                   <li class="date"> <ul class="has-date">
                        <% _.each(deadlineItems, function(item, key) {%>
                            <% //alert(i.id + '-' + item.category_id)%>
                            <% if (i.id == item.category_id) {%>

                                   <% if (item && !item . deleted && !item . completed && i.id == item.category_id) {%>
                                       <%item_count++;%>
                                        <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="has-deadline">
                                            <label>
                                                <em></em>
                                            </label>
                                            <textarea><%= item . name %></textarea>
                                            <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
                                            <em><%= item . deadline ? item . deadline : '' %></em>
                                        </li>
                                        <% }; };  %>

                        <% }); %>
                    </ul></li>
                 <% }%>      

            <% _.each(items, function(item, key) {%>
                <% //alert(i.id + '-' + item.category_id)%>
                <% if (i.id == item.category_id) {%>

                       <% if (item && !item . deleted && !item . completed && i.id == item.category_id) {%>
                           <%item_count++;%>
                            <li data-item-id="<%= item . id %>" data-internal-id="<%= key %>" class="normal">
                                <label>
                                    <em></em>
                                </label>
                                <textarea><%= item . name %></textarea>
                                <span><%= item . name .replace(/#([\d]{1,2})\/([\d]{1,2})$/, '').replace(/#([\d]{1,2})\/([\d]{1,2})/g, '$1/$2').replace(/@.+/, '') %></span>
                                <em><%= item . deadline ? item . deadline : '' %></em>
                            </li>
                            <% }; };  %>

            <% }); %>
                <% if (item_count == 0){%>
                   <li class="placeholder">&nbsp;</li>
                <% }%>

                </ul>
            </li>
    <% }); %>


</script>

